<template>
	<div class="box v-hv-center">
		<div class="card">
			<div class="head-box h-h-start-v-center" style="width: 100%; height: 300px;background-color: #4B6CB7; padding: 50px;">
				<div>
					<h1 style="font-size: 30px;margin-top: 50px;margin-bottom: 20px;">Youview-Admin</h1>
					<h2>打造人人测评的时代</h2>
						<p style="width: 300px; margin-right: 100px;">通过众测深度连接厂商和用户，在这里你除了有机会第一时间体验新品之外，还能看到许多优质的产品测评报告，解决了购买前产品和用户的信息不对等。在完成众测报告之后，不用归还。</p>
				</div>
				<div>
					<img src="../../static/four.png" alt="">
				</div>
			</div>
			<div style="padding: 50px;">
				<div class="h-h-start-v-center">
					<div>
						<h2 style="margin-bottom: 20px;">简介</h2>
						<p style="width: 300px; margin-right: 100px;">通过众测深度连接厂商和用户，在这里你除了有机会第一时间体验新品之外，还能看到许多优质的产品测评报告，解决了购买前产品和用户的信息不对等。在完成众测报告之后，不用归还。</p>
					</div>
					<img src="../../static/one.png" alt="">
				</div>
				<div class="h-h-start-v-center">
					<div>
						<h2 style="margin-bottom: 20px;">简介</h2>
						<p style="width: 300px; margin-right: 100px;">通过众测深度连接厂商和用户，在这里你除了有机会第一时间体验新品之外，还能看到许多优质的产品测评报告，解决了购买前产品和用户的信息不对等。在完成众测报告之后，不用归还。</p>
					</div>
					<img src="../../static/two.png" alt="">
				</div>
				<div class="h-h-start-v-center">
					<div>
						<h2 style="margin-bottom: 20px;">简介</h2>
						<p style="width: 300px; margin-right: 100px;">通过众测深度连接厂商和用户，在这里你除了有机会第一时间体验新品之外，还能看到许多优质的产品测评报告，解决了购买前产品和用户的信息不对等。在完成众测报告之后，不用归还。</p>
					</div>
					<img src="../../static/three.png" alt="">
				</div>
			</div>
			<div class="login-box v-hv-center">
				<div style="width: 100%;" class="v-h-start-v-start">
					<h1>登录</h1>
					<h3 style="margin-bottom: 20px;">for Admin</h3>
				</div>
				<div style="width: 100%;" class="v-h-start-v-start">
					<h3 style="max-resolution: res;-bottom: 10px;">用户名</h3>
				</div>
				
				<Input v-model="value" placeholder="Enter something..." style="width: 300px;margin-bottom: 30px;" />
				<div style="width: 100%;" class="v-h-start-v-start">
					<h3 style="margin-bottom: 10px;">密码</h3>
				</div>
				<Input v-model="value" placeholder="Enter something..." style="width: 300px" />
				<Button @click="getAllUer" style="width: 100%; margin: 60px 0;" type="primary">登录</Button>
			</div>
		</div>
	</div>
</template>

<script>
	import {getAllUser} from '../../API/index.js'
	export default{
		data(){
			return {
				
			}
		},
		methods:{
			getAllUer(){
				getAllUser().then(res=>{
					console.log(res)
				})
			}
		}
	}
</script>

<style scoped>
	.box{
		/* margin: 0 auto; */
		width: 100%;
		height: calc(100vh);
		/* background-color: #2C3E50; */
		position: fixed;
		background: #4b6cb7;  /* fallback for old browsers */
		background: -webkit-linear-gradient(to right, #182848, #4b6cb7);  /* Chrome 10-25, Safari 5.1-6 */
		background: linear-gradient(to right, #182848, #4b6cb7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	}
	.card{
		width: 70%;
		height: 65%;
		background-color: #f5f5f5;
		border-radius: 30px;
		box-shadow: rgb(0 0 0 / 50%) 0px 2px 12px 0px;
		position: relative;
		text-align: left;
		/* padding: 50px; */
		overflow-y: scroll;
		
	}
	.card::-webkit-scrollbar {  
	    width: 0 !important;
	    height: 0 !important; 
	}
	.login-box{
		width: 20%;
		height: 48%;
		background-color: #fff;
		position: fixed;
		right: 350px;
		top: 50%;
		box-shadow: rgb(0 0 0 / 10%) 0px 2px 12px 0px;
		margin-top: -230px;
		padding: 30px;
	}
	.head-box{
		background: #9CECFB;  /* fallback for old browsers */
		background: -webkit-linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);  /* Chrome 10-25, Safari 5.1-6 */
		background: linear-gradient(to right, #0052D4, #65C7F7, #9CECFB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

		color: #fff;
	}
</style>
